<template>
  <div class="DrawLotteryRaffle">
    <div class="bg-chunk">
      <div class="foundation_chunk">
        <div class="turntable_chunk" >
          <div ref="prizeBgChunk" class="prize_bg_chunk " style="{backgroundImage: url(https://cancer.obs.cn-north-1.myhuaweicloud.com/188.png), backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat',}"></div>
          <div class="center_take_chunk">
            <img @click="onStart" src="../../../assets/img/WechatIMG11390.png" alt="">
          </div>
        </div>
        <div class="right-menu">
          <div class="rule" @click="handleRule">
            <img src="" alt="">
          </div> 
        </div>
      </div>
    </div>
    <van-dialog 
      v-model:show="show" 
      @confirm="handleConfirmDialog"
      title="">
      <div >
        {{ 谢谢参与 }}
      </div>
    </van-dialog>
    <van-dialog 
    v-model:show="showMoney" 
    :show-confirm-button="false"
    title="">
    <div class="" style="margin-top:10px">
      <div class="page-title ">恭喜你中奖了！</div>
      <div><span class="price">{{count}}</span>元
       </div>
      <div class="input-zfb"> 
        <van-cell-group >
          <van-field v-model="zfbName" name="请输入姓名"  placeholder="请输入支付宝号"  ref="inputNumber" 
          autocomplete="off"    size="large" style="border: 1px solid #999;
          border-radius: 5px;"/>
          <van-field v-model="zfbNumber" name="请输入手机号或支付宝号"  placeholder="请输入支付宝号"  ref="inputNumber" 
          autocomplete="off"    size="large" style="border: 1px solid #999;margin-top:5px;
          border-radius: 5px;"/>
        </van-cell-group>
        <div class="money-rule">
          <div>注：</div>
          <p>1、请仔细核对您的姓名和手机号是否正确，以免影响发放红包；</p>
          <p>2、红包将在三个工作日打到您的支付宝账户；</p>
          <p>3、最终解释权归本公司所有。</p>
        </div>
        <div>
          <van-button type="primary" @click="saveZfbNumber" style="width: 80%;
          margin: 10px;">保存</van-button>
        </div>
      </div>
    </div>
  </van-dialog>
  <van-dialog v-model:show="show" title="抽奖规则">
    <div class="van-dialog__message van-dialog__message--has-title van-dialog__message--left" style="text-align:left">
      每位成功付费的用户均可获得一次免费抽奖的机会，中奖概率如下：
      <br/>【中奖概率说明】<br/>
          88红包中奖概率：0.5% <br/>
          188红包中奖概率：0.1% <br/>
          288 红包中奖概率：0.01% <br/>
          388红包中奖概率：0.005% <br/>
          888红包中奖概率：0.0001% <br/>
          谢谢惠顾99.3849%
      </div>
  </van-dialog>
  </div>
</template>
<script>
import { ref, reactive, getCurrentInstance, onMounted, toRefs, unref, } from 'vue'
import { useRouter, useRoute, } from 'vue-router'
import { showToast, showConfirmDialog,Dialog,showAlertDialg} from 'vant'
import api from '../api/index'

export default {
  setup() {
    const route = useRoute()
    const router = useRouter()
    const show=ref(false)
    const width = document.documentElement.clientWidth / 7.5
    document.documentElement.style.fontSize = width + 'px'
    const prizeBgChunk = ref(null)

    onMounted(() => {
      if(route.query.outTradeNo) {
        localStorage.setItem('outTradeNo', route.query.outTradeNo)
      }
      if (route.query.outTradeNo && localStorage.getItem('outTradeNo') == route.query.outTradeNo && localStorage.getItem('draw')) {
        state.time = 0;
        state.animing = true
      }
    })

    const state = reactive({
      zfbNumber:'',
      zfbName:'',
      showMoney:false,
      animing: false,
      deg: 360 * 3,
      timer: null,
      interval: 3,
      time: 1,
      awardNum: 1,
      show: false,
      count:88,
      drawPic: '../../../assets/img/choujiang.png',
      prizeType:'',

    })

    const methods = {
      onStart() {
        const draw =localStorage.getItem('draw')
       if (state.animing || draw) return;//防止双击(误操作)
        unref(prizeBgChunk).style.transition = `all ${state.interval}s ease-out`;
        unref(prizeBgChunk).style.transform = `rotate(${state.time * state.deg}deg)`;
        api.get('getRaffleResult', {}).then(res => {
          let deg=0
          const {code,data}=res
          state.prizeType=data
          if (code * 1 === 200) {
            if(data*1 ==0){
              state.count=888
              deg=0
            }else if(data*1 ==1){
              state.count=388
              deg=-120
            }else if(data*1 ==2){
              state.count=288
              deg=120
            }else if(data*1 ==3){
              state.count=188
              deg=-60
            }else if(data*1 ==4){
              state.count=88
              deg=60
            }
            else{
              deg=180
            }
            state.animing = true;
        
        //修改完样式，就可开始动画
        unref(prizeBgChunk).style.transform = `rotate(${state.time * state.deg +deg}deg)`;
        if(state.awardNum === 1) {
          state.awardNum--
        }

        clearTimeout(state.timer)
        state.timer = setTimeout(() => {
          state.animing = false
          state.time++
          localStorage.setItem('draw', 1)
          if(data*1 ==5){
            showToast('谢谢参与')
          }else{
            methods.confirmMoney()
          }
        }, state.interval * 1000 + 500)
                
          }else{
            unref(prizeBgChunk).style.transform = `rotate(${state.time * state.deg +180}deg)`;
            showToast('谢谢参与')
          }
        })
       
      },
      confirm() {
        state.showMoney = false
        state.show = true
      },
      confirmMoney() {
        state.show = false
        state.showMoney = true
      },
      handleConfirmDialog() {
        // router.push({
        //   path: '/',
        //   query: {
        //     outTradeNo: route.query.outTradeNo,
        //   }
        // })
        location.href="https://youmeta.icornerstore.com/?orgId=22413052&cId=WZL1"
      },
      handleCancelDialog(){
        location.href="https://u.tuiabcedc.cn/2cd7"
      },
      saveZfbNumber(){
        const params={
          name:state.zfbName,
          phone:state.zfbNumber,
          drawResult:state.prizeType,
          outTradeNo:route.query.outTradeNo ? route.query.outTradeNo: JSON.parse(localStorage.getItem('params')).outTradeNo
        }
        if(!!state.zfbNumber || !!state.zfbName){
        api.post('savePrizeResults', { ...params }).then(res => {
          if (res.code === 200) {
            showToast('保存成功')
          } else {
            showToast(res.message)
          }
        })
        }else{
          showToast('请输入姓名和（手机号或支付宝账号）')
        }
      },
      handleRule() {
        show.value = true
      },
    }
  
    return {
      ...toRefs(state),
      prizeBgChunk,
      show,
      ...methods,
    }
  }
}
</script>

<style lang="scss" scoped>
  img {
    // pointer-events: none;
    width: 100%;
  }
  .DrawLotteryRaffle {
    background:linear-gradient(to right,#fec09ead,rgb(241, 183, 141),rgb(244, 188, 151));
    height: 100vh;
    .right-menu {
      position: absolute;
      right: 0;
      top: 14vmin;
      font-size: 3vmin;
      color: #fff;
      z-index: 1000;
  
      .rule {
        border-radius: 3.866667vmin 0 0 3.866667vmin;
        text-align: center;
        border-right: none;
  
        img {
          width: 8vmin;
        }
      }
  
    }
    .bg-chunk {
      background: url(../../../assets/img/WechatIMG11391.jpg) no-repeat;
      background-size: 100% 100%;
      height: 13.34rem;
      margin: auto;
      overflow: hidden;
      position: relative;
      width: 7.5rem;
    }

    .title-img-chunk {
      // margin: 2.14rem auto auto;
      margin: 1.8rem auto auto;
      width: 7.5rem;
    }

    .foundation_chunk {
      height: 10.24rem;
      position: relative;
      width: 7.5rem;
    }

    .turntable_chunk {
      left: 0;
      position: absolute;
      top: 5rem;
      right: 0;
      margin: 0 auto;
    }
  .prize_bg_chunk{
    background: url(../../../assets/img/WechatIMG11389.png) no-repeat;
    background-size: 100% 100%;
    height: 6.6rem;
    margin: auto;
    overflow: hidden;
    width: 6.6rem; 
    transform: rotate(0deg);
  }

    .center_take_chunk {
      height: 2.6rem;
      left: 0;
      right: 0;
      position: absolute;
      top: 1.7rem;
      width: 2.7rem;
      z-index: 10;
      margin: 0 auto;
    }

    .award_count_text {
      color: #fff;
      font-size: .21rem;
      font-weight: 400;
      left: 2.7rem;
      position: absolute;
      top: 7.95rem;
    }

    
    /deep/.van-dialog__message--left {
      text-align: center;
      margin-top: .5rem;
    }
    .dialog-img {
      width: 50%;
    }
    .input-zfb{
      width:90%;
      margin:0 auto;
    }
    .page-title {
     
      text-align: center;
      font-size: 8vmin;
      font-weight: 700;
      color: #d23411;
      width: 100%;
  }
   .price{
       display: inline-block;
      font-size: 12vmin;
      color: #d23411;
      margin:5px 0;
      font-weight: 700;
  }
  .money-rule{
    font-size:12px;
    color:#ddd;
    margin-top:5px;
    text-align:left;
    p{
      margin-bottom:2px;
    }
  }
  }

</style>